<template>
  <div class="app-container">
      <div class="app-home">
  
        <el-card class="form-container" shadow="never">
            <el-steps :active="active" finish-status="success" align-center>
            <el-step title="提交订单" />
            <el-step title="支付订单" />
            <el-step title="平台发货" />
            <el-step title="确认收货" />
            <el-step title="完成评价" />
            </el-steps>
        </el-card>

      </div>
  <div>
  {{ "🔖基本信息"}}

   
    <el-table
      v-loading="listLoading" :data="list"
      element-loading-text="Loading"
      border
      fit
      highlight-current-row
    >

      <el-table-column type="index" align="center" label="订单编号" width="213">
        <template slot-scope="scope">
          {{ scope.row.num }}
        </template>
      </el-table-column>
      
      <el-table-column align="center"  label="发货流水单号" width="213">
        <template slot-scope="scope">
          <span>{{ scope.row.numberOrder }}</span>
        </template>
      </el-table-column>



      <el-table-column label="用户账号" width="210" align="center">
        <template slot-scope="scope">
          <span>{{ scope.row.Account }}</span>
        </template>
      </el-table-column>

       <el-table-column label="支付方式" property="pay" align="center" width="212">
        <template slot-scope="scope">
          {{scope.row.pay }}
        </template>
      </el-table-column>

       <el-table-column label="订单来源" property="source" align="center" width="212">
        <template slot-scope="scope">
          {{scope.row.source }}
        </template>
      </el-table-column>

       <el-table-column label="订单类型" property="state" align="center" width="212">
        <template slot-scope="scope">
          {{scope.row.state }}
        </template>
      </el-table-column>

    </el-table>

<!-- 第二个表格 -->


<el-table
      v-loading="listLoading" :data="list"
      element-loading-text="Loading"
      border
      fit
      highlight-current-row
    >

      <el-table-column type="index" align="center" label="配送方式" width="212">
        <template slot-scope="scope">
          {{ "暂无" }}
        </template>
      </el-table-column>
      
      <el-table-column align="center"  label="物流单号" width="212">
        <template slot-scope="scope">
          <span>{{ "暂无" }}</span>
        </template>
      </el-table-column>

    <el-table-column label="自动确认收货时间" width="212" align="center">
        <template slot-scope="scope">
          <span>{{ "15天"}}</span>
        </template>
      </el-table-column>

      <el-table-column label="订单可得优币" width="212" align="center">
        <template slot-scope="scope">
          <span>{{ 123456 }}</span>
        </template>
      </el-table-column>

       <el-table-column label="订单可得成长值" property="pay" align="center" width="212">
        <template slot-scope="scope">
          {{123456 }}
        </template>
      </el-table-column>

       <el-table-column label="活动信息" property="source" align="center" width="212">
        <template slot-scope="scope">
          {{"单品促销打折"}}
        </template>
      </el-table-column>

     

    </el-table>
    </div>
    
    <!-- 第三层 -->
   
    <div>
      {{ "🔖收获人信息"}}
      
    <el-table
      v-loading="listLoading" :data="list"
      element-loading-text="Loading"
      border
      fit
      highlight-current-row
    >

      <el-table-column type="index" align="center" label="收货人" width="318">
        <template slot-scope="scope">
          {{ scope.row.num }}
        </template>
      </el-table-column>
      
      <el-table-column align="center"  label="手机号码" width="318">
        <template slot-scope="scope">
          <span>{{ 8888888 }}</span>
        </template>
      </el-table-column>

    <el-table-column label="邮政编码" width="318" align="center">
        <template slot-scope="scope">
          <span>{{ 51800 }}</span>
        </template>
      </el-table-column>

      <el-table-column label="收货地址" width="318" align="center">
        <template slot-scope="scope">
          <span>{{ scope.row.address }}</span>
        </template>
      </el-table-column>

    </el-table>

    </div>


  

  </div>
</template>


    
  

<script>


import { getList } from "@/api/shopping";

 export default {
 
  data() {
    return {
      list: null,
      listLoading: true,
      items: [],
      
      
    };
  },
  created() {
    this.fetchData();
  },
  methods: {
    fetchData() {
      this.listLoading = true;
      getList().then((response) => {
        this.list = response.data.items;
        this.listLoading = false;
        
      });
    },

   
  }
}

</script>


